<script setup>
import { ref } from 'vue'
import MyUpload from 'vue-image-crop-upload'
import axios from 'axios'
import bus from '@/utils/bus'

import CompressImg from '@/utils/compressImg'

import { uploadAvatarService } from '@/api/user'

const props = defineProps({
    avatar: {
        type: String,
        default: ''
    }
})

console.log('avatar:', props.avatar);

const isShow = ref(false)

const handleShow = () => {
    isShow.value = true
}

const cropSuccess = async (imgDataUrl, field) => {
    console.log('-------- crop success --------')
    console.log(imgDataUrl) // base64 图片数据
    console.log('field: ' + field)

    const f = await imageUrlToFileObject(imgDataUrl, 'avatar.jpg')
    console.log('压缩之前的file', f);

    new CompressImg({
        file: f,
        quality: 0.5,
        success: async (res) => {
            const f2 = await imageUrlToFileObject(res, 'avatar.jpg')
            console.log('压缩之后的file', f2);

            const formData = new FormData()
            formData.append('file', f2)

            await uploadAvatarService(formData)
            bus.emit('updateInfo')
        }
    })


}

async function imageUrlToFileObject(imageUrl, filename) {
    if (imageUrl == '') {
        return
    }
    try {
        // 使用 Axios 下载图片数据
        const response = await axios.get(imageUrl, { responseType: 'arraybuffer' })

        // 将下载的数据转换成 Blob 对象
        const blob = new Blob([response.data], {
            type: response.headers['content-type']
        })

        // 创建 File 对象
        const file = new File([blob], filename, {
            type: response.headers['content-type']
        })

        return file
    } catch (error) {
        console.error('Error converting image URL to File object:', error)
        return null
    }
}

const errorHandler = () => true
</script>
<template>
    <div @click="handleShow" class="avatar-edit-master">
        <el-avatar class="avatar" shape="square" :src="avatar" @error="errorHandler"
            style="width: 12rem; height: 12rem">
            <img src="@/assets/image/default_avatar.png" />
        </el-avatar>

        <div class="edit-img">
            <svg-icon name="avatar_edit" width="5rem" height="5rem"></svg-icon>
        </div>
    </div>
    <my-upload field="avatar" @crop-success="cropSuccess" v-model="isShow" :width="200" :height="200" :no-rotate="false"
        img-format="png">
    </my-upload>
</template>
<style scoped lang="scss">
.avatar-edit-master {
    position: relative;

    .avatar {
        margin-top: 5px;
        margin-bottom: 5px;
        cursor: pointer;
    }

    .edit-img {
        display: none;
        z-index: 100;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }
}

.avatar:hover+.edit-img {
    display: block;
}

.avatar:hover {
    filter: brightness(70%);
}

@media screen and (max-width: 657px) {
    .vicp-wrap {
        width: 290px;
    }

    .vicp-operate {
        position: absolute;
        left: 25px;
        bottom: 20px;
    }

    .vicp-preview-item {
        display: none;
    }
}
</style>
